<template>
  <div class="container">
    <text class="big-title">示例</text>
    <div>
      <scroller class="scroller">
        <div v-for="(item, index) in cellList">
          <div class="cell" :ref="'box' + index">
            <text class="cell-text">{{item}}</text>
          </div>
        </div>
      </scroller>
      <div class="btn" @click="scroll"><text>滚动到cell5</text></div>
      <text>{{info}}</text>
    </div>
    <text class="big-title">文档</text>
    <div class="button" @click="showDoc"><text class="btn-text">点击查看文档</text></div>
  </div>
</template>

<style scoped>
.container {
  padding: 10px;
}
.big-title {
  color: black;
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}
.scroller {
  height: 400px;
}
.btn {
  border-radius: 8px;
  border-color: black;
  border-width: 2px;
  justify-content: center;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cell {
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color: #6699FF;
  margin: 2px;
  border-width: 2px;
  border-color: black;
}
.cell-text {
  font-size: 30px;
  color: white;
  font-weight: bold;
}
.button {
  height: 60px;
  justify-content: center;
  opacity: 1.0;
}
.button:active {
  opacity: 0.6;
}
.btn-text {
  font-size: 30px;
  color: blue;
}
</style>

<script>
  import utils from '../utils.js';
  let dom = weex.requireModule('dom');
  let navigator = weex.requireModule('navigator');
  let arr = [];
  for (let i = 0; i < 10; i++) {
    arr.push("cell " + i);
  }
  export default {
    data: {
      cellList: arr,
      info: ''
    },
    methods: {
      scroll() {
        let el = this.$refs.box5[0];
        dom.scrollToElement(el, {});
        dom.getComponentRect(el, res => {
          let data = res.size;
          this.info = 'cell5 position info: \nwidth: ' + data.width + ', height: ' + data.height + ', left: ' + data.left + ', top: ' + data.top + ', right: ' + data.right + ', bottom: ' + data.bottom;
        });
      },
      showDoc() {
        navigator.push({
          url: utils.getDocDetailUrl(weex.config.bundleUrl),
          animated: true
        });
      }
    }
  }
</script>
